LESSON 4 - OpenLayers Customization

Objective: In this tutorial you will learn how to make a simple mapping application with an OpenLayers front end.

Prerequisites:

1. GeoServer installed and running (visible from http://localhost:8080/geoserver) .
2. GeoServer configured with the topp:states dataset.

Step 1: Export OpenLayers Preview

1. Navigate to the Demo > Map Preview page (http://localhost:8080/geoserver/mapPreview.do).
2. View the OpenLayers preview for the states dataset.
3. In Firefox, select File > Save Page As... (Ctrl+S)
    
4. Save the file as MyMap.html in your C:\Program Files\GeoServer 1.6-beta3\data_dir\www directory. Ensure you save as Web Page, HTML only
5. Confirm that you can view the page from http://localhost:8080/geoserver/www/MyMap.html

Step 2: Customize MyMap.html

1. Open C:\Program Files\GeoServer 1.6-beta3\data_dir\www\MyMap.html in Notepad++ that deals well with line endings (Start > Run > wordpad).
2. Edit the <title> tag, and change from "OpenLayers Map Preview" to "MyMap"
3. Save your changes, refresh http://localhost:8080/geoserver/www/MyMap.html and confirm that your custom title shows up in the browsers title bar. 
   
4. Now, replace the content of the MyMap.html file with the source of this file http://dev.openlayers.org/sandbox/tschaub/foss4g/examples/google-sm.html and we'll start building up a map from "scratch."
5. Download http://dev.openlayers.org/sandbox/tschaub/foss4g/build/OpenLayers.js and place it in your C:\Program Files\GeoServer 1.6-beta3\data_dir\www directory.
6. Begin editing MyMap.html again and replace the OpenLayers script tag with the path to this OpenLayers.js file

   <script src="http://localhost:8080/geoserver/www/OpenLayers.js" type="text/javascript"></script>

7. Add the following line above your init() function

   OpenLayers.ImgPath = "../openlayers/img/";

8. Add the following link tag above the script tag that points to OpenLayers.js.    

   <link rel="stylesheet" href="../openlayers/theme/default/style.css" type="text/css" />

9. Now, open http://localhost:8080/geoserver/www/MyMap.html and confirm that you're looking at imagery from google centered on North America.

Step 3. Add a WMS layer from GeoServer

1. Edit MyMap.html and define a WMS layer that points to your topp:states dataset.  The WMS constructor in OpenLayers takes four arguments: layer name, layer url, parameters, and options (see documentation here http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/WMS-js.html). We want the layer named "topp:states" and we want transparency.  Your layer definition should look like

   // add a WMS layer in Spherical Mercator
   var wms = new OpenLayers.Layer.WMS(
   "State Boundaries",
   "http://localhost:8080/geoserver/wms",
   {layers: "topp:states", transparent: "true"}
   );

   Add the above just below the definition of the "google spherical mercator" layer.

2. Add the layer to the map (layers can be added one at a time with map.addLayer, or all at once with addLayers) 

   map.addLayers([gsat, wms]);

3. Refresh your map to see the states dataset over Google's tiles.

Step 4. Add an editable vector layer

1. Edit MyMap.html and define a Vector layer for editing.  The constructor for the Vector layer takes two arguments: name and options.  We want to name it something like "Editable Vectors."  Your layer definition should look something like

   var vector = new OpenLayers.Layer.Vector("Editable Vectors");

   Add the above just below the definition of the "states" layer.

2. Add the vector layer to the map.

   map.addLayers([gsat, wms, vector]);

3. Add an editing toolbar to your map.  The constructor for the editing toolbar takes two arguments: layer and options.  We want to point it to the vector layer created above.   Since we aren't doing anything special with the toolbar, we can add it to the map at the same time it is created. 

   map.addControl(new OpenLayers.Control.EditingToolbar(vector));

   Add the above just below the "LayerSwitcher" control ("map.addControl(new OpenLayers.Control.LayerSwitcher()))"

4. Refresh the map to see an editing toolbar that lets you draw points, lines, and polygons.

Extra Credit

The current build of OpenLayers doesn't properly support WFS over a Sperical Mercator layer (as above).  Despite that, you can build a map similar to the one described above in EPSG:4326 (the default projection assumed in OpenLayers).

1. Build a map similar to the one above, but in EPSG:4326.  Use one of the other WMS data sources as the base layer.
2. Add a WFS layer to the map.  Try using the topp:poi dataset.  Note that adding a maxFeatures parameter is a good idea - limit the number of features returned to 25 or so at first.  The class docs linked above should help with the syntax for constructing a WFS layer.
3. Add ModifyFeature control to the map (again, see the class documentation).  Point it to your WFS layer.  Activate the control after adding it to the map.
4. You should be able to modify the geometries of the requested WFS features.

save-page.png (image/png)
save-page.png (image/png)
edit-title.png (image/png)
new-title.png (image/png)